import React, { Component } from 'react'
import { SideBar } from 'antd-mobile'
import { LeftOutline } from 'antd-mobile-icons'
import { goodsCategory, goodsList } from '@api'
import MyTabbar from '../../components/MyTabbar'
import './index.scss'

export default class Cates extends Component {
  state = {
    activeKey: "72399",
    cates: [],
    cateGoods: []
  }
  render() {
    return (
      <div className='sc_cates'>
        {/* 头部 */}
        <div className="item-head">
          <div className="back" onClick={() => this.props.history.go(-1)}>
            <LeftOutline />
          </div>
          <div className="gosearch" onClick={() => this.props.history.push('/search')}>
            <img src="https://m.ehaoyao.com/_nuxt/img/icon-search.0efa216.png" alt='' />搜索商品
          </div>
          <div className="changestyle"></div>
        </div>
        {/* 分类列表 */}
        <div className='sc_cc'>
          <div style={{ display: 'flex' }}>
            <div>
              <SideBar activeKey={this.state.activeKey} onChange={this.activeChange}>
                {
                  this.state.cates.map(item => (
                    <SideBar.Item key={item.id} title={item.name} />
                  ))
                }
              </SideBar>
            </div>
            <div className='catesGoods'>
              {
                this.state.cates.map(item => (
                  <div hidden={this.state.activeKey !== String(item.id)} key={item.id} className="right_c">
                    <ul className='clearfix'>
                      {
                        this.state.cateGoods ?
                          this.state.cateGoods.map(item1 => (
                            <li key={item1.id} onClick={() => this.goDetail(item1.id)}>
                              <div className="right_c_img">
                                <img src={item1.pic} alt={item1.name} />
                              </div>
                              <div className="right_c_name">{item1.name}</div>
                            </li>
                          ))
                          :
                          <img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb209937dc2276a7cb5a47fb831879af25c52fa1b25567-NGX9jR_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643854399&t=38b125f8e1cfb1e6206009fd86f762df' className='nullimg' alt='nullimg' />
                      }
                    </ul>

                  </div>
                ))
              }
            </div>
          </div>
        </div>
        {/* tabbar */}
        <MyTabbar pathname={this.props.location.pathname} ></MyTabbar>
      </div>
    )
  }
  componentDidMount() {
    this.goodsCategory()
    this.goodsList()
  }
  componentWillUnmount() {
    this.setState = () => false;
  }
  // 点击左侧
  activeChange = async (value) => {
    await this.setState({
      activeKey: value
    })
    console.log(this.state.activeKey, value, 'activeChange');
    this.goodsList()
  }
  // 分类左侧列表
  goodsCategory = () => {
    goodsCategory().then((res) => {
      if (res.data.code === 0) {
        this.setState({
          activeKey: String(res.data.data[0].id),
          cates: res.data.data
        })
      }
    })
  }
  // 右侧商品列表
  goodsList = () => {
    console.log(this.state.activeKey, 'goodsList');
    goodsList({
      categoryId: this.state.activeKey
    }).then((res) => {
      if (res.data.code === 0) {
        this.setState({
          cateGoods: res.data.data.result
        })
      }
      if (res.data.code === 700) {
        this.setState({
          cateGoods: null
        })
      }
    })
  }
  // 点击去详情页
  goDetail = (value) => {
    this.props.history.push({ pathname: `/detail/${value}` })
  }
}
